<template>
	<view>
		<view style="padding: 40rpx;">
			<u-form :model="userInfo" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label="姓名" prop="name" borderBottom labelWidth="140rpx">
					<u--input placeholder="收货人" clearable v-model="userInfo.name"></u--input>
				</u-form-item>
				<u-form-item label="联系方式" prop="phone" borderBottom labelWidth="140rpx">
					<u--input type="number" placeholder="请输入电话" clearable v-model="userInfo.phone"></u--input>
				</u-form-item>
				<u-form-item label="收货地址" borderBottom labelWidth="160rpx">
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<p v-if="regionTextStart" style="color: rgb(193, 193, 193);font-size: 32rpx;">{{text}}
						</p>
							<u-icon name="arrow-down" color=" rgb(193, 193, 193)" size="22"
								style="margin-left: 350rpx;margin-top: -45rpx;position: fixed;top: 400rpx;right: 60rpx;"></u-icon>
					</pick-regions>
					<h3>{{regionName}}</h3>
				</u-form-item>
				<u-form-item label="详细地址" borderBottom labelWidth="140rpx">
					<u--input placeholder="请输入.." clearable v-model="userInfo.address"></u--input>
				</u-form-item>

				<u-form-item borderBottom labelPosition="top" label="是否设为默认地址" labelWidth="300rpx">
					<u-switch v-model="userInfo.isDefault" @change="change"></u-switch>
				</u-form-item>
				<u-form-item v-if="!id">
					<u-button style="margin-top:15rpx ;" type="primary" @click="addUserAddressHandler">添加</u-button>
				</u-form-item>
				<u-form-item v-if="id">
					<u-button style="margin-top:15rpx ;" type="primary" @click="EditUserAddressHandler">修改</u-button>
				</u-form-item>
				<u-form-item v-if="id">
					<u-button style="margin-top:15rpx ;" type="error" @click="deleteUserAddressHandler">删除</u-button>
				</u-form-item>
			</u-form>
			<u-toast ref="uToast"></u-toast>
		</view>
		<view>
			<u-modal :show="show" duration="0" style="text-align: center;" :asyncClose="true" :content='content'
				showCancelButton @confirm="confirm" @cancel="cancelHandler"></u-modal>
		</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		AddUserAddressAPI,
		GetUserInfoAPI,
		GetUserAddressAPI,
		EditUserAddressAPI,
		DeleteUserAddressAPI
	} from "../../../services/api.js"
	import {
		gettoken
	} from "../../../utils/tools.js"
	export default {
		data() {
			return {
				show: false,
				content: '是否确认删除！！',
				id: "",
				text: "请选择地址",
				regionTextStart: true,
				defaultRegion: ['广东省', '广州市', '番禺区'],
				defaultRegionCode: '440113',
				errorType: 'message',
				region: [],
				userInfo: {
					region: "",
					regionCode: "",
					name: '',
					phone: "",
					isDefault: false,
					userId: "",
					address: ""
				},
				list: {
					type: '',
					title: '',
					message: "",
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入正确的手机号',
							trigger: ['blur', "change"],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return this.mobileState = uni.$u.test.mobile(value);
							},
							message: '请输入手机号',
							// 触发器可以同时用blur和change
							trigger: ['blur', "change"],
						}
					],
					name: [{
						required: true,
						message: '请输入收货人姓名',
						trigger: ['blur', "change"],
					}]
				},

			}
		},
		methods: {
			change() {
			},
			handleGetRegion(region) {
				this.regionTextStart = false
				this.region = region
				this.userInfo.regionCode = region[2]?.code
				this.userInfo.region = region.map(item => item.name).join(' ')
			},
			getuserInfo() {
				GetUserInfoAPI().then((res) => {
					this.userInfo.userId = res.id
				})
			},
			addUserAddressHandler() {
				if (this.userInfo.name && this.userInfo.phone) {
					AddUserAddressAPI(this.userInfo).then((res) => {
						uni.showToast({
							title: '添加成功',
							icon: "success",
							duration: 300
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/address/address"
							})
						}, 500)
					})
				} else {
					uni.showToast({
						title: '添加失败',
						icon: "error",
						duration: 2000
					})
				}
			},
			EditUserAddressHandler() {
				
				EditUserAddressAPI(this.id, this.userInfo).then((res) => {
					
					uni.showToast({
						title: '修改成功',
						icon: "success",
						duration: 300
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/address/address"
						})
					}, 500)
				})
			},
			deleteUserAddressHandler() {
				this.show = true

			},
			showModal() {
				this.show = true;
			},
			confirm() {
				setTimeout(() => {
					// 3秒后自动关闭
					this.show = false;
					DeleteUserAddressAPI(this.id).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: "success",
							duration: 300
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/address/address"
							})
						}, 500)
					})
				}, 1000)
			},
			cancelHandler() {
				this.show = false;
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onLoad(ev) {
			this.getuserInfo()
			if (ev.id) {
				this.id = ev.id
				GetUserAddressAPI("/" + ev.id).then(res => {
					for (let i in this.userInfo) {
						this.userInfo[i] = res.data[i]
					}
					this.text = res.data.region
				})
			}
		},
		onShow() {
			if (!gettoken()) {
				this.isShow = true
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style>

</style>